<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    #all{
      width: auto;
      height: 2000px;
      background-color: #9f9f9f;
    }
    #head{
      width: auto;
      height: 100px;
      background-color: #00f7de;
      border: 1px black solid;
    }
    #h_l{
      float: left;
      width: 100px;
      height: 80px;
      margin: 0 auto;
      margin-left: 2%;
      line-height: 100px;
    }
    #h_l span{

    }
    #h_m{
      float: left;
      width: 200px;
      height: 80px;
      margin: 0 auto;
      margin-left: 35%;
      line-height: 100px;
    }
    #h_m span{

    }
    #h_r{
      float: left;
      width: 100px;
      height: 100px;
      margin-left: 35%;
    }
    #img{
      width: 70px;
      height: 90px;
      border: 1px solid black;
      margin-top: 5px;
    }
    #main{
      width: auto;
      height: 400px;
      background-color: #ffb800;
      padding-top: 100px;
    }
    #button_list{
      width: auto;
      height: 100px;
      line-height: 100px;
    }
    #button_list button{
      width: 80px;
      height: 30px;
      border: 1px black solid;
      border-radius: 5px;
      margin: auto 10px;
      background-color: #8d8d8d;
      cursor: pointer;
    }
  </style>
</head>
<body>
<div id="all">
  <div id="head">
    <div id="h_l">
      <span>欢迎,[[*{session.user.user_name}]]</span>
    </div>
    <div id="h_m">
      <span id="time"></span>
    </div>
    <div id="h_r">
      <div id="img_div">
        <img id="img" src="/userimg/undefined.jpg"/>
      </div>
    </div>
  </div>
  <div id="main">
    <div id="button_list">
      <button id="changeUserImg" onclick="changeUserImg()">更换头像</button>
      <button id="goHall" onclick="goHall()">去大厅</button>
      <button id="goVideo" onclick="goVideo()">去观影厅</button>
      <button id="goShaolei" onclick="goShaolei()">去扫雷</button>
    </div>
  </div>
</div>

  <script src="./layui/layui.js"></script>
  <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
  <script type="text/javascript" src="js/ajaxfileupload.js" charset="GBK"></script>
  <script th:inline="javascript">
    function setImg(){
      var imgObjPreview=document.getElementById("img");
      imgObjPreview.src = [[*{session.user.user_img_path}]] + [[*{session.user.user_img_name}]] ;
    }
  </script>
  <script type="text/javascript">
    $(function() {
      init();
    })
    function init() {
      setImg();
      setTime();
    }
    function setTime(){
      var time=document.getElementById("time");
      var date=new Date();
      time.innerHTML = date.toLocaleString();
    }
    function changeUserImg(){
      location.href = "goChangeUserImg";
    }

    function goHall(){
      location.href = "goHall";
    }

    function goVideo() {
      location.href = "goVideo";
    }

    function goShaolei(){
      location.href = "goShaolei";
    }
  </script>
  <script language="JavaScript">
    setInterval(function(){setTime();},1000);
    //指定1秒刷新一次
  </script>
</body>
</html>